<template>
  <div class="goods_list">
    <MyTable :list="goodList">
      <template #header>
        <th>#</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
      </template>
      <template #body=scope>
         <td>{{scope.idx+1}}</td>
        <td>{{scope.row.goods_name}}</td>
        <td>{{scope.row.goods_price}}</td>
        <td>
          <span 
          v-for="(item,index) in scope.row.tags" :key="index" 
          class="badge btn-danger">
            {{item}}
          </span>
        </td>
        <td><button @click="goodList.splice(scope.idx,1)" class="btn btn-danger btn-sm">删除</button></td>    
      </template>
    </MyTable>
  </div>
</template>

<script>
import MyTable from '../components/MyTable.vue'

export default {
  data() {
    return {
      goodList:[]
    }
  },
  components: { MyTable },
  created(){
    this.lordData()
  },
  methods:{
   async lordData(){
    const res =  await this.$axios.get('api/goods')
    // console.log(res);
    this.goodList = res.data.data
    }
  }
}
</script>

<style>
.goods_list{
  padding-top: 45px;
}
.badge{
  margin-right: 5px;
}
</style>